<template>
  <div class="reserve_box">
    <header-comm></header-comm>
    <div class="bcg">
      <!-- <reservepage></reservepage> -->
      <div class="margin_top">
        <div class="top_reserve">
          <div class="tit">代理记账</div>
        </div>
        <div class="reserve_box">
          <a-table
            :columns="reservecolumns"
            :pagination="pagination"
            :dataSource="reservedata"
            bordered
          >
             <template slot-scope="text, record, index"   slot="expandedRowRender">
            <div class="div">
              <!-- <div class="addchild"><a-button  type="primary" size="small">添加</a-button></div> -->
              <div class="ddxxlist ddxxhead">
                <span class="listspan">姓名</span>
                <span class="listspan">联系电话</span>
                <span class="listspan">公司名称</span>
                <span class="listspan">内容</span>
                <span class="listspan">提交时间</span>
                <span class="listspan">标记</span>
                <span class="listspan">审核状态</span>
                <span class="listspan">价格</span>
                <span class="listspan">原因</span>
                <span class="listspan">操作</span>
              </div>
              <div class="ddxxlist dxbody" v-if="text.dkfp!=''">
                <span class="listspan" >{{text.dkfp.username}}</span>
                <span class="listspan">{{text.dkfp.phone}}</span>
                <span class="listspan">{{text.dkfp.companyName}}</span>
                <span class="listspan">
                <span class="del">
                  <a :href="text.dkfp.annex" target="view_frame">下载</a>
                  <a-icon class="ico" type="cloud-download" />
                </span>
                </span>
                <span class="listspan">{{text.dkfp.dateline}}</span>
                <span class="listspan">{{text.dkfp.type}}</span>
                <span class="listspan">
                  <a-tag color="#108ee9" v-if="text.dkfp.examine==0">未审核</a-tag>
                  <a-tag color="#87d068" v-if="text.dkfp.examine==1">通过</a-tag>
                  <a-tag color="#f50" v-if="text.dkfp.examine==2">未通过</a-tag>
                </span>
                <span class="listspan">{{text.dkfp.payPrice}}</span>
                <span class="listspan">{{text.dkfp.remark}}</span>

                <span class="listspan">
                  <span class="del" @click="examines(1,text.dkfp.id_num)">审核通过</span>
                  <span class="del" @click="examines(2,text.dkfp.id_num)">审核不通过</span>
                  <a-popconfirm
                    title="确定删除吗?"
                    style="color:#1890ff; cursor: pointer;"
                    @confirm="() =>deleter(text.dkfp.id_num)"
                  >删除</a-popconfirm>
                </span>
              </div>
            </div>
          </template>
            <template
              v-for="col in ['xsze', 'fxbl', 'fxze']"
              :slot="col"
              slot-scope="text, record, index"
            >
              <div class="rig_xse_bac" :key="col">
                <template>{{text}}</template>
              </div>
            </template>
            <template slot="down" slot-scope="text, record, index">
              <div class="down_box">
                <span class="del">
                  <a :href="record.annex" target="view_frame">下载</a>
                  <a-icon class="ico" type="cloud-download" />
                </span>
              </div>
            </template>
            <template slot="examine" slot-scope="text, record, index">
            <div>
              <a-tag  v-if='text!=0' :color="text==1?'#87d068':'#f50'">{{text==1?'通过':'未通过'}}</a-tag>
              <a-tag v-if='text==0' color="#2db7f5">未审核</a-tag>
            </div>
          </template>
            <template slot="operation" slot-scope="text, record, index">
              <span class="del" @click="examines(1,record.id_num)">审核通过</span>
              <span class="del" @click="examines(2,record.id_num)">审核不通过</span>
              <span class="del" @click="deleter(record.key)">删除</span>
            </template>
          </a-table>
           <div class="shyy_tk" v-if="shyyflag">
            <div class="sryy">
              <div class="close" @click="close">
                <a-icon type="close" />
              </div>
              <div>
                <a-textarea
                  v-if="shyyval.key==1"
                  :maxlength="10"
                  v-model="remark"
                  placeholder="请输入金额"
                  :rows="4"
                />
                <a-textarea
                  v-if="shyyval.key==2"
                  v-model="remark"
                  placeholder="请输入审核不通过原因"
                  :rows="4"
                />
              </div>
              <div class="btn">
                <a-button type="primary" @click="subkhbbExamine">提交</a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";

import qs from "qs";
const reservecolumns = [
  {
    title: "姓名",
    dataIndex: "username",
    scopedSlots: { customRender: "username" }
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    scopedSlots: { customRender: "phone" }
  },
  {
    title: "公司名称",
    dataIndex: "companyName",
    scopedSlots: { customRender: "companyName" }
  },
  {
    title: "内容",
    dataIndex: "down",
    scopedSlots: { customRender: "down" }
  },
  {
    title: "提交时间",
    dataIndex: "dateline",
    scopedSlots: { customRender: "dateline" }
  },
    {
    title: "审核状态",
    dataIndex: "examine",
    scopedSlots: { customRender: "examine" }
  },
   {
    title: "价格",
    dataIndex: "payPrice"
  },
   {
    title: "原因",
    dataIndex: "remark"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
const reservedata = [];

for (let i = 0; i < 20; i++) {
  // data.push({
  //   key: i.toString(),
  //   xse: "大于5000",
  //   tcbl: "5%"
  // });
  //   reservedata.push({
  //     key: i.toString(),
  //     id_num: i,
  //     username: "王圣磊",
  //     qy: "陕西西安",
  //     fl: "2020-3-31",
  //     down: "下载"
  //   });
}
export default {
  data() {
    return {
      reservedata,
      reservecolumns,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
       shyyflag: false,
      remark: "",
      shyyval: {
        key: "",
        val: ""
      }
    };
  },

  methods: {
    getcpydlist(pagination) {
      this.axios
        .post(
          "fhl/xunjia/productDzList.php",
          qs.stringify({
            page: pagination.current,
            pageSize: pagination.defaultPageSize,
            sqdwid: this.$store.state.bbl_sqdwid,
            type: 3
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.pagination.total = Number(res.data.result.total);
            this.reservedata = res.data.result.data;
            for (var i = 0; i < this.reservedata.length; i++) {
              this.reservedata[i].key = this.reservedata[i].id_num;
            }
          }else{
              this.reservedata =[]
          }
        });
    },
  examines(examine_type, id_num) {
      this.shyyflag = true;
      this.shyyval.key = examine_type;
      this.shyyval.val = id_num;
    },
    subkhbbExamine() {
      if (this.shyyval.key == 2) {
        if (this.remark.trim()) {
          this.Examine();
        } else {
          this.$notification["error"]({
            message: "失败",
            description: "请输入审核不通过原因！"
          });
        }
      } else {
        if (this.remark.trim()) {
          this.Examine();
        } else {
          this.$notification["error"]({
            message: "失败",
            description: "请输入金额！"
          });
        }
      }
    },
    Examine() {
      this.axios
        .post(
          "fhl/xunjia/shenghe.php",
          qs.stringify({
            id_num: this.shyyval.val,
            examine_type: this.shyyval.key,
            payPrice: this.shyyval.key == 1 ? this.remark : "",
            remark: this.shyyval.key == 2 ? this.remark : ""
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.getcpydlist(this.pagination);
            this.close();

            if (res.data.sendMsg == "success") {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg + "，短信发送成功"
              });
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg + "，短信发送失败"
              });
            }
          } else {
            this.getcpydlist(this.pagination);
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    close() {
      this.shyyflag = false;
      this.remark = "";
    },
    deleter(key) {
      this.axios
        .post(
          "fhl/xunjia/productDzDelete.php",
          qs.stringify({
            id_num: key
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.getcpydlist(this.pagination);
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    }
  },
  components: {
    headerComm
  },
  created() {
    this.getcpydlist(this.pagination);
  }
};
</script>

<style lang='less'>
.margin_top {
  width: 98%;
  margin: 67px auto;
  background: #fff;
  padding: 22px;
  .top_reserve {
    text-align: left;
    font-weight: bold;
    font-size: 18px;
    color: #333;
  }
  .top_reserve {
    padding: 10px;
  }
  .reserve_box {
    .down_box {
      .ico {
        font-size: 20px;
        margin-left: 5px;
        vertical-align: middle;
      }
    }
    .ddxxlist{
      width: 100%;
    }
  }
}
</style>
